<template>
	<div class="menu">
		<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router ref="menu">
			<el-menu-item index="/actSettings" @click="addTab">
				<img src="~_assets/activity.png">
				<span slot="title">活动设置</span>
			</el-menu-item>
			<el-menu-item index="/group" @click="addTab"> 
				<img src="~_assets/group.png">
				<span slot="title">优惠分组配置</span>
			</el-menu-item>
			<el-submenu index="3">
				<template slot="title">
					<img src="~_assets/yh.png">
					<span>优惠统计</span>
				</template>
				<el-menu-item index="/discount" @click="addTab">优惠券统计</el-menu-item>
				<el-menu-item index="/redTotal" @click="addTab">红包统计</el-menu-item>
				<el-menu-item index="/cashBack" @click="addTab">返现统计</el-menu-item>
			</el-submenu>
			<el-menu-item index="/gift" @click="addTab">
				<img src="~_assets/sw.png">
				<span slot="title">实物礼品统计</span>
			</el-menu-item>
			<el-submenu index="5">
				<template slot="title">
					<img src="~_assets/hd.png">
					<span>活动统计</span>
				</template>
				<el-menu-item index="/actStatistics" @click="addTab">活动优惠券统计</el-menu-item>
				<el-menu-item index="/actRed" @click="addTab">活动红包统计</el-menu-item>
				<el-menu-item index="/actCashBack" @click="addTab">活动返现统计</el-menu-item>
			</el-submenu>
			<el-menu-item index="/news" @click="addTab">
				<img src="~_assets/db.png">
				<span slot="title">待办事项</span>
			</el-menu-item>
		</el-menu>
	</div>
</template>
<script>
	let arr = ['优惠券统计','红包统计','返现统计','活动优惠券统计','活动红包统计','活动返现统计']
	export default {
		computed: {
			onRoutes() {
				// return this.$route.path.replace('/', '');
			}
		},
		watch:{
			onRoutes(){
				if(this.onRoutes != '3' && this.onRoutes != '5' ){
					this.$refs.menu.close('3')
					this.$refs.menu.close('5')
				}
			}
		},
		methods:{
			addTab(e){
				let txt = e.$el.innerText
				if(!arr.includes(txt)){
					this.$refs.menu.close('3')
					this.$refs.menu.close('5')
				}
				if(txt != '优惠统计' && txt != '活动统计'){
					this.$emit('addTab',txt)
				}
			}
		}
	}
</script>
<style lang="less">
	@import '~_config/mixin.less';
	.menu {
		padding-top: 2%;
		.bs();
		border-radius: 0px 8px 8px 0px;
		.sc(18px, #fff);
		img {
			.wh(26px, 26px);
			margin-right: 19px;
		}
		.el-menu-item {
			.wh(270px, 66px);
			.bg(#021F4E);
			.fx(row, flex-start, center);
			color: #fff;
		}
		.el-submenu {
			width: 270px;
			.bg(#021F4E);
		}
		.el-submenu__title {
			color: #fff
		}
		.el-menu-item:focus,
		.el-menu-item:hover,
		.el-submenu__title:focus,
		.el-submenu__title:hover {
			.bg(#00539A);
		}
		.el-menu {
			background-color: #021F4E;
		}
		.is-opened div:first-child,
		.el-menu-item.is-active {
			background: #00539A;
		}
		.is-opened div:first-child::before,
		.el-menu-item.is-active::before {
			content: '';
			display: block;
			width: 0.025rem;
			height: 0.29rem;
			background: #0091ED;
			position: absolute;
			left: 0;
		}
		.el-menu-item.is-active{
			color: #fff;
		}
		.el-menu--inline .el-menu-item.is-active {
			color: #27D9FF;
			background:#021F4E;
		}
		.el-menu--inline .el-menu-item{
			padding-left:0.36rem !important;
		}
		.el-menu--inline .el-menu-item.is-active::before{
			width: 0;
			height: 0;
		}
		.el-submenu__title i{
			color: #fff;
		}
		.el-menu-item *,.el-submenu__title *,.el-menu-item{
			letter-spacing: 2px;
		}
	}
</style>